<template>
  <mu-container>
    <mu-flex justify-content="center">
      <mu-flex justify-content="center">
        <mu-text-field
          ref="token"
          style="width:500px;"
          :model="token"
          color="Red"
          error-text="请输入TOKEN"
        ></mu-text-field>
        <mu-button flat color="error" @click="enter()">
          <mu-icon left value="launch"></mu-icon>进入
        </mu-button>
        <mu-button flat color="indigo400" @click="add()">
          <mu-icon left value="add_circle"></mu-icon>创建
        </mu-button>
      </mu-flex>
    </mu-flex>
    <mu-scale-transition>
      <mu-card style="width: 100%; margin: 0 auto;" raised :model="topic" v-show="true">
        <mu-card-title :title="topic.title" :sub-title="topic.ct"></mu-card-title>
        <mu-card-text>{{topic.content}}</mu-card-text>
        <mu-card-actions>
          <mu-button flat small color="red" @click="openDialog(topic.token)">
            <mu-icon value="reply"></mu-icon>回复
          </mu-button>
          <mu-button flat small color="grey500" @click="share(topic.token)">
            <mu-icon value="share"></mu-icon>
            {{topic.token}}
          </mu-button>
        </mu-card-actions>
      </mu-card>
    </mu-scale-transition>
    <br>
    <mu-divider></mu-divider>
    <br>
    <mu-container v-for="re in topic.children" :key="re.token">
      <mu-scale-transition>
        <mu-card style="width: 100%; margin: 0 auto;" v-show="true">
          <mu-card-title :title="re.title" :sub-title="re.ct"></mu-card-title>
          <mu-card-text>{{re.content}}</mu-card-text>
          <mu-card-actions>
            <mu-button flat small color="red" @click="openDialog(re.token)">
              <mu-icon value="reply"></mu-icon>回复
            </mu-button>
            <mu-button flat small color="grey500" @click="share(re.token)">
              <mu-icon value="share"></mu-icon>
              {{re.token}}
            </mu-button>
          </mu-card-actions>
        </mu-card>
      </mu-scale-transition>
      <br>
      <mu-divider></mu-divider>
    </mu-container>
    <mu-dialog width="800" transition="slide-bottom" title="回复: test" scrollable :open.sync="replyDailog">
      <mu-form :model="retopic">
        <mu-form-item prop="title" label label-float :rules="titleRules">
          <mu-text-field v-model="retopic.title" placeholder="标题" color="error"></mu-text-field>
        </mu-form-item>
        <vue-editor
          v-model="retopic.content"
          placeholder="内容"
          :editorToolbar="customToolbar"
          :editorOptions="editorSettings"
          :customModules="customModulesForEditor"
           :rules="contentRules"
        ></vue-editor>
      </mu-form>
      <mu-button slot="actions" flat color="error" @click="reply">
        <mu-icon left value="reply"></mu-icon>回复
      </mu-button>
      <mu-button slot="actions" flat color="grey500" @click="closeDialog">
        <mu-icon left value="block"></mu-icon>关闭
      </mu-button>
    </mu-dialog>
    <mu-snackbar position="bottom" :open.sync="resultOpen">
      {{resultMsg}}
      <mu-button flat slot="action" color="secondary" @click="closeResult">Close</mu-button>
    </mu-snackbar>
  </mu-container>
</template>
<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      loading: false,
      token: null,
      replyDailog: false,
      titleRules: [
        { validate: val => !!val, message: "必须填写标题" },
        { validate: val => val.length <= 50, message: "请输入小于50个字" }
      ],
      contentRules: [
        { validate: val => !!val, message: "必须填写内容" }
      ],
      customToolbar: [
        // [{ font: [] }],
        // [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        // [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video"],
        // ["link", "image", "video", "formula"],
        // [{ direction: "rtl" }],
        ["clean"]
      ],
      customModulesForEditor: [
        // { alias: "imageResize", module: ImageResize }
      ],
      editorSettings: {
        // modules: {
        //   imageDrop: true,
        //   imageResize: {}
        // }
      },
      topic: null,
      retopic: null,
      resultOpen: false,
      resultMsg: null
    };
  },
  created() {
    console.log("--------->", this.$route.params.token);
    var _this = this;
    this.token = this.$route.params.token
    this.$http.get('/t/' + this.token).then(
      response => {
        let data = response.data
        console.log(data)
        if(data.result == 'success'){
          _this.topic = data.topic
        }else{

        }
      })
    .catch(err => {
      console.log(err)
    })
  },
  mouted() {
    var _this = this;
  },
  methods: {
    enter() {
      let _this = this;
      if (!_this.token) {
        this.$refs.token.focus();
      } else {
        console.log(_this.token);
      }
    },
    add() {
      this.$router.push({ name: "add" });
    },
    openDialog(id) {
      this.replyDailog = true;
    },
    closeDialog() {
      this.replyDailog = false;
    },
    reply() {
      console.log("terste");
    },
    send() {
      console.log("terste");
    },
    share(token) {
      console.log("token--->", token);
      let _this = this;
      if (!_this.token) {
        this.$refs.token.focus();
      } else {
        console.log(_this.token);
      }
    }
  }
};
</script>